<template>
  <div class="app-container" :style="{'padding-top': levelObj.list.length > 1 ? '0' :''}">

    <!-- 不分组模式 -->
    <el-row v-if="1===levelObj.list.length" :gutter="levelObj.gutter" class="el-row">
      <el-col v-for="(item,index) in levelObj.list[0]" :key="index" :span="item.span">
        <div class="menu-item">
          <div class="menu-item-content" @click="goTab(item)">
            <img :src="item.imageSrc" class="menu-item-icon">
            <span class="menu-item-title">{{ item.title }}</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 分组-->
    <div v-for="(group,index) in levelObj.list" v-else :key="index" class="group">
      <div class="title">
        <span>{{ group.title }}</span>
      </div>
      <el-row :gutter="levelObj.gutter" class="el-row">
        <el-col v-for="(item,index2) in group.list" :key="index2" class="col" :span="levelObj.span">
          <div class="menu-item" style="margin-bottom: 30px">
            <div class="menu-item-content" @click="goTab(item)">
              <img :src="item.imageSrc" class="menu-item-icon">
              <span class="menu-item-title">{{ item.title }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import twoLevel from '@/assets/pageUniversal/secondLevelMenuPage.js'
import PermissionMixin from '@/mixins/modules/permission'

export default {
  mixins: [PermissionMixin],
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      levelObj: {
        list: []
      }
    }
  },
  created() {
    let path = this.$route.path
    const name = path.substring(path.lastIndexOf(':') + 1).replace(/'/g, '')
    if (!name) {
      return this.$commonUtils.showErrorToast('页面名称不能为空' + name)
    }
    if (!twoLevel[name]) {
      return this.$commonUtils.showErrorToast('该页面底下未配置二级页面' + name)
    }
    this.levelObj = twoLevel[name]
    const list = this.levelObj.list
    // 判断是否有权限
    for (let i = 0; i < list.length; i++) {
      for (let j = 0; j < list[i].length; j++) {
        if (undefined !== list[i][j].permissionCode && this.permissionCheck(list[i][j].permissionCode) === false) {
          list[i].splice(j--, 1)
        }
      }
    }
    const gutter = this.levelObj.gutter
    if (list.length > 1) {
      let span = 8
      let maxLength = 3
      for (const val of list) {
        if (val.list.length > maxLength) {
          maxLength = val.list.length
        }
      }
      maxLength = maxLength >= 6 ? 6 : maxLength
      span = parseInt(gutter / maxLength)
      this.$set(this.levelObj, 'span', span)
    }
  },
  methods: {
    // 跳转页面
    goTab(item) {
      if (item.pathName === '') {
        return
      }
      this.$addTab(item.pathName, item.params || undefined)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding-top: 60px;

  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 180px;

    .menu-item-content {
      border-radius: 3px;
      cursor: pointer;
      padding: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;

      &:hover {
        background-color: #f5f5f5;
      }

      .menu-item-icon {
        width: 60px;
        height: 60px;
      }

      .menu-item-title {
        margin-top: 10px;
        font-size: 14px;
      }
    }
  }

  .group {
    border-bottom: 1px solid #ececec;
    margin-bottom: 10px;

    .title {
      width: 100%;
      padding: 22px 0;
      position: relative;
      text-indent: 15px;
    }

    .title::before {
      content: "";
      position: absolute;
      top: 20px;
      left: 0;
      width: 1px;
      height: 20px;
      background: red;
    }
  }

  .group:last-child {
    border-bottom: 0;
  }
}
</style>
